<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表 - 搜索页</title>
    <style>
        .cont{width:1000px;margin: 0 auto;overflow: hidden;}
        .cont .box{width:250px;border: solid 1px black;box-sizing: border-box;float: left;text-align: center;}
        .box img{width: 80%;}
        .box p{margin: 10px 0;line-height: 16px;height:32px;overflow: hidden;}
    </style>
</head>
<body>
    <h2>商品列表<small><a href="../cart/index.html">去结算</a></small></h2>
    <div class="cont">
        商品卖完了，正在上货...
    </div>
</body>
<script src="../libs/jquery.js"></script>
<script>
    class List{
        constructor(){
            this.cont = $(".cont");
            this.url = "../data/pro.json";
            
            this.load();
            this.addEvent();
        }
        addEvent(){
            const that = this;
            this.cont.on("click",".addCart",function(eve){
                that.id = $(this).attr("data-id");
                
                that.setData();
            })
        }
        setData(){
            this.proMsg = localStorage.getItem("proMsg") ? JSON.parse(localStorage.getItem("proMsg")) : [];

            let index=0;
            this.res.some((val,idx)=>{
                index = idx;
                return val.proId === this.id
            });

            if(this.proMsg.length >= 1){
                let flag = false;
                let i;
                for(i=0;i<this.proMsg.length;i++){
                    if(this.proMsg[i].id === this.id){
                        flag = true;
                        break;
                    }
                }
                if(flag){
                    this.proMsg[i].num++
                }else{
                    this.proMsg.push({
                        id:this.id,
                        num:1,
                        price:this.res[index].price
                    })
                }
            }else{
                this.proMsg.push({
                    id:this.id,
                    num:1,
                    price:this.res[index].price
                })
            }

            localStorage.setItem("proMsg",JSON.stringify(this.proMsg));
        }
        load(){
            $.ajax({
                url:this.url,
                success:(res) => {
                    this.res = JSON.parse(res);
                    this.render();
                }
            })
        }
        render(){
            console.log(this.res)
            let str = "";
            for(let i=0;i<this.res.length;i++){
                // url后如何拼接get数据
                    // 使用?隔开url和数据
                    // 数据：字段名1=字段值1&字段名2=字段值2
                str += `<div class="box">
                            <a href="../detail/index.html?id=${this.res[i].proId}">
                                <img src="${this.res[i].proImg}" alt="">
                                <p>${this.res[i].proName}</p>
                                <p>${this.res[i].price}</p>
                                <p>${this.res[i].proInfo}</p>
                            </a>
                            <input type="button" value="加入购物车" data-id="${this.res[i].proId}" class="addCart">
                        </div>`
            }
            this.cont.html(str);
        }
    }

    new List;

</script>
</html>